<template>
  <transition name="mini">
    <div class="mini-player" v-show="!fullScreen" @click="showNormalPlayer">
      <div class="cd-wrapper">
        <div class="cd" ref="cdRef">
          <img
            :src="currentSong.pic"
            ref="cdImageRef"
            :class="cdClass"
            style="
               {
                width: 1.705rem;
                height: 1.705rem;
              }
            "
          />
        </div>
      </div>
      <div class="slider-wrapper" ref="sliderWrapperRef">
        <div class="slider-group">
          <div class="slider-page" v-for="song in playList" :key="song.id">
            <h2 class="name">{{ song.name }}</h2>
            <p class="desc">{{ song.singer }}</p>
          </div>
        </div>
      </div>
      <div class="control">
        <ProgressCircle :circleStyle="{width:'1.365rem',height:'1.365rem'}" :progress="progress" :togglePlay='togglePlay'>
            <i class="icon-mini" :class="miniPlayIcon" @click.stop='togglePlay'></i>
        </ProgressCircle>
      </div>
      <div class="control" @click.stop="showPlayList">
        <i class="icon-playlist"></i>
      </div>
      <PlayList ref="PlayListRef"></PlayList>
    </div>
  </transition>
</template>
<script>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'
import useCd from './use-cd'
import useMinSlider from './use-min-slider'
import ProgressCircle from './progress-circle.vue'
import PlayList from './play-list.vue'
export default {
  name: 'MiniPlayer',
  components: {
    ProgressCircle,
    PlayList
  },
  props: {
    progress: {
      type: Number,
      default: 0
    },
    togglePlay: {
      type: Function
    }
  },
  setup () {
    const store = useStore()
    const PlayListRef = ref(null)
    const fullScreen = computed(() => store.state.isFullScreen)
    const currentSong = computed(() => store.getters.currentSong)
    const playing = computed(() => store.state.isPlaying)
    const playList = computed(() => store.state.playList)
    const miniPlayIcon = computed(() => {
      return playing.value ? 'icon-pause-mini' : 'icon-play-mini'
    })
    // methods
    function showNormalPlayer () {
      store.commit('setFullScreen', true)
    }
    function showPlayList () {
      PlayListRef.value.show()
    }
    // hooks
    const { cdRef, cdImageRef, cdClass } = useCd()
    const { slider, sliderWrapperRef } = useMinSlider()
    return {
      cdRef,
      cdImageRef,
      sliderWrapperRef,
      PlayListRef,
      slider,
      cdClass,
      fullScreen,
      currentSong,
      miniPlayIcon,
      playing,
      playList,
      showNormalPlayer,
      showPlayList
    }
  }
}
</script>
<style lang="scss" scoped>
.mini-player {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 180;
  width: 100%;
  height: 2.558635rem;
  background: $color-highlight-background;
  .cd-wrapper {
    flex: 0 0 1.705757rem;
    width: 1.705757rem;
    height: 1.705757rem;
    padding: 0 0.426439rem 0 0.852878rem;
    .cd {
      height: 100%;
      width: 100%;
      img {
        border-radius: 50%;
        &.playing {
          animation: rotate 10s linear infinite;
        }
        &.pause {
          animation-play-state: paused;
        }
      }
    }
  }
  .slider-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    line-height: .852878rem;
    overflow: hidden;
    .slider-group {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        .slider-page {
          display: inline-block;
          width: 100%;
          transform: translate3d(0, 0, 0);
          backface-visibility: hidden;
          .name {
            margin-bottom: .085288rem;
            @include no-wrap();
            font-size: $font-size-medium;
            color: $color-text;
          }
          .desc {
            @include no-wrap();
            font-size: $font-size-small;
            color: $color-text-d;
          }
        }
      }
  }

  .control {
    flex: 0 0 1.279318rem;
    width: 1.279318rem;
    padding: 0 .426439rem;
    .icon-playlist {
      position: relative;
      top: -0.085288rem;
      font-size: 1.19403rem;
      color: $color-theme-d;
    }
    .icon-mini {
      position: absolute;
      left: 0;
      top: 0;
      color: $color-theme-d;
      font-size: 1.364606rem;
    }
  }

  &.mini-enter-active,
  &.mini-leave-active {
    //   赛贝尔曲线（x1,y1,x2,y2）
    transition: all 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  }
  &.mini-enter-from,
  &.mini-leave-to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
</style>
